Interfaces for viewing content, such as web sites and views of applications, can be designed using “wireframes” that define a plurality of containers. Each container can correspond to a part of the screen area of a view of the web site or application and content items (e.g., graphics, text, video, functional components such as buttons, etc.) can be associated with the different containers during the design process. For example, a site may include a header container occupying the top portion of the screen area and a footer container occupying the bottom portion of the screen area. A body container can lie between the header and footer. The body container may contain several nested containers, such as a navigation bar at the left (or right) side of the body and a content area in the remainder of the body.
During the design of an interface, a wireframe may be generated by drawing multiple rectangles and positioning the rectangles. However, this may not be satisfactory. For example, even with guides provided by a graphics editing application in which the rectangles are drawn, moving and adjusting the rectangles may be tedious. In such a scenario, the rectangles may have no logical identity as containers, which may add more complexity when it is time to implement the design. Implementing the design can involve determining locations for storing content items and writing code for accessing those items when the interface is used. Revising the design with differently-sized or differently-positioned containers may entail starting over with new sets of rectangles.